<template>
	<view style="background-color: #F5F5F5;height: 100vh;">
		
		<view class="box" >
			<view class="box1 box1-2">
				{{info.title}}
			</view>

			<view class="box2">
				<view class="box2-1">
					<view class="box2-1-2">
						{{info.ctime}}
					</view>
					<view class="box2-1-2" style="margin-left: 20rpx;">
						阅读 {{info.view}}
					</view>
				</view>
				<view class="box2-2">
					<!-- 发表于 淄博 -->
				</view>
			</view>

			<view class="box3" v-html="info.content">
				
			</view>
			<image class="box4" src="" mode=""></image>
			<view class="box5">
			</view>
			<!-- <view class="box6" @click="setfav()">
				<view class="box6-1">
					收藏({{info.fav}})
				</view>
				<image class="box6-2" :src="info.isfav>0?'https://x.bilinmeiju.com/static/shoucactive.png':'https://x.bilinmeiju.com/static/shouc.png'" mode=""></image>
			</view> -->
		</view>
	</view>
</template>

<script>
	var that;
	export default {
		data() {
			return {
				bartop: 0,
				info:{},
				id:0
			}
		},
		onLoad(e) {
			that = this;
			this.id = e.id;
			this.bartop = this.$bartop;
			this.getinfo();
		},
		methods: {
			getinfo(){
				that.$post('api/getqikaninfo',{id:that.id}).then(res=>{
					that.info = res.data;
				})
			},
			setfav(){
				that.$post('api/setcollection',{model:'news',id:that.info.id}).then(res=>{
					if(res.data.isfav){
						that.info.isfav = 1;
						that.info.fav =that.info.fav*1+1;
						uni.showToast({
							title:'收藏成功',
							icon:'success'
						})
					}else{
						that.info.isfav = 0;
						that.info.fav =that.info.fav*1-1;
						uni.showToast({
							title:'取消成功',
							icon:'success'
						})
					}
				})
			}
		}
	}
</script>

<style>
	.box {
		width: 90vw;
		margin: 0 auto;
		/* display: flex; */
	}

	.box1-1 {
		margin-bottom: -10rpx;
		width: 100rpx;
		height: 36rpx;
	}

	.box1-2 {
		font-size: 32rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 700;
		color: #131313;
		/* line-height: 50rpx; */
	}

	.box2 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 20rpx auto;
	}

	.box2-1 {
		display: flex;
		align-items: center;
	}

	.box2-1-1 {
		margin-right: 20rpx;
		font-size: 24rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 500;
		color: #131313;
		line-height: 50rpx;
	}

	.box2-1-2 {
		font-size: 24rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #898888;
	}

	.box2-2 {
		font-size: 24rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #898888;

	}

	.box3 {
		margin-bottom: 20rpx;
		font-size: 30rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #333333;
		line-height: 50rpx;
	}

	.box4 {
		width: 100%;
		height: 381rpx;
	}

	.box5 {
		font-size: 20rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #999999;
		line-height: 20rpx;
		margin-top: 20rpx;
	}

	.box6 {
		margin-top: 40rpx;
		display: flex;
		flex-direction: row-reverse;
		align-items: center;
	}

	.box6-1 {
		font-size: 24rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #999999;
		line-height: 50rpx;
	}

	.box6-2 {
		width: 23rpx;
		height: 23rpx;
	}

	.text {
		margin-top: -20rpx;
		margin-left: -90rpx;
		margin-right: 20rpx;
		font-size: 20rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #FFFFFF;
	}
</style>
